<template>
	<view class="container">
		<view class="talents-box" v-if="detailItem">
			<view class="title-box uni-flex">
				<view class="title-box-left">
					<img-item class="title-box-image" :src="detailItem.photo"></img-item>
				</view>
				<view class="title-box-right uni-flex uni-column">
					<view>
						<view class="title-name">{{detailItem.name}}</view>
						<item-score :score="detailItem.score"></item-score>
						<view class="title-tag">
							<uni-tag v-for="(item,index) in detailItem.skillList" :key="index" :text="item"
								custom-style="font-size: 24rpx; background-color: #F4F2F3; border-color: #F4F2F3; color: #FF6C25; margin-right: 20rpx">
							</uni-tag>
						</view>
					</view>
					<view class="title-share">
						<button open-type="share" class="title-share-button">
							<view class="title-share-content">
								<text class="iconfont icon-share"></text>
								<text>分享</text>
							</view>
						</button>
					</view>
				</view>
			</view>
			<view class="intro-box">
				<view class="intro-title">达人介绍</view>
				<view class="intro-content">
					<rich-text :nodes="detailItem.introduction"></rich-text>
				</view>
				<view v-if="detailItem.introductionImageList.length">
					<img-item v-for="(item,index) in detailItem.introductionImageList" :key="index" :src="item" class="intro-image"></img-item>
				</view>
			</view>
			<view class="intro-hint">
				<view class="score-model">
					<view class="score-info ">
						<uni-rate class="getscore rate-score" v-model="scores" :size="ratesize.size" :margin="ratesize.margin" activeColor="#FF6C25" :readonly="!scoreFlag" :is-fill="false" @change="onChange" />
						<view class="evaluation">{{evaluation}}</view>
					</view>
					<view v-if="scoreFlag" class="setscore" @click="setScore">立即评价</view>
					<view v-else  class="scored" >你已评价！</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import itemScore from "@/components/base/item-score.vue";
	import {setScore,talentDetail} from '@/http/api.js'
	const comment = ['不推荐','一般','还不错','很满意','强烈推荐'];
	export default{
		components: {
			itemScore
		},
		data() {
			return {
				content:"",
				detailItem: null,
				scores:4,
				scoreFlag:true,
				talentMobile:null,
				ratesize:{
					size:uni.upx2px(32),
					margin:uni.upx2px(30)
				},
				setScoreFlag:true
			}
		},
		onLoad(e) {
			if (!e?.content) return
			this.content = e.content;
			let _obj = JSON.parse(decodeURIComponent(e.content));
			this.talentMobile = _obj.talentMobile;
			this.getdata();
		},
		computed:{
			evaluation(){
				return comment[this.scores-1];
			}
		},
		methods:{
			getdata(){
				this.$request({
					url: talentDetail,
					method:'POST',
					loading: true,
					data: {
						'talentMobile':this.talentMobile
					}
				}).then(res => {
					this.detailItem = res;
					this.scoreFlag = this.detailItem.scoreStatus;
					this.scores = this.detailItem.userScore?this.detailItem.userScore:4;
				})
			},
			setScore(){
				if(!this.setScoreFlag)return;
				this.setScoreFlag = false;
				const param = {
					score: this.scores,
					talentMobile: this.talentMobile
				}
				this.$request({
					url: setScore,
					method:'POST',
					data: param
				}).then((res) => {
					this.scoreFlag = false;
				}).catch(err=>{
					console.log(err);
					uni.showToast({
						title: err,
						duration: 3000,
						icon: "none"
					});
					this.setScoreFlag = true;
				})
			},
			onChange(e) {
				this.scores = e.value;
			}
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage() {
			return {
				title: '达人',
				path: `/pages/talents/detail?content=${this.content}&isRedirectUrl`
			}
		},
		// #endif
	}
</script>

<style lang="scss" scoped>
	.talents-box {
		padding: 30rpx 28rpx;
		background: #FFFFFF;
		.title-box {
			.title-box-left {
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-align-items: center;
				align-items: center;

				.title-box-image {
					display: block;
					width: 200rpx;
					height: 264rpx;
				}
			}

			.title-box-right {
				-webkit-flex: 1;
				flex: 1;
				-webkit-justify-content: space-between;
				justify-content: space-between;
				padding-left: 20rpx;
				.title-name {
					font-size: 36rpx;
					line-height: 40rpx;
					text-align: left;
					margin-bottom: 16rpx;
				}
				.title-tag {
					margin-top: 18rpx;
				}
				.title-share {

				}
				.title-share-button {
					display: inline-block;
					vertical-align: middle;
					font-size: 28rpx;
					color: #333;
					padding: 0;
					background-color: transparent;
					&::after {
						border: none;
					}
					.title-share-content {
						display: flex;
						align-items: center;
						height: 36rpx;
						line-height: 36rpx;
						.icon-share{
							color: #FF6C25;
							margin-right: 12rpx;
						}
					}
				}
			}
		}
		.intro-box {
			margin: 50rpx 0 30rpx;
			.intro-title {
				color: #000;
				font-size: 36rpx;
				line-height: 40rpx;
				margin-bottom: 12rpx;
				font-weight: bold;
			}
			.intro-content {
				color: rgba(0, 0, 0, 0.5);
				font-size: 30rpx;
				line-height: 56rpx;
			}
			.intro-image {
				margin: 30rpx 0;
				height: 324rpx;
				width: 100%;
			}

		}
	}
	.intro-hint {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 108rpx;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.5);
		background-color: #ffffff;
		text-align: center;
		color: #666666;
		font-size: 28rpx;
		line-height: 108rpx;
		.score-model{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 26rpx;
			.score-info{
				display: flex;
				align-items: center;
				.getscore{
					display: inline-block;
				}
				.evaluation{
					font-size: 26rpx;
					color: rgba(0, 0, 0, 0.5);
				}	
			}
			.setscore{
				width: 268rpx;
				height: 80rpx;
				background: #FF6C25;
				border-radius: 40rpx;
				font-size: 32rpx;
				line-height: 80rpx;
				color: #fff;
			}
			.scored{
				font-size: 32rpx;
				font-weight: bold;
				color: #FF6C25;
			}
		}
	}
	
</style>
